<template>
<!-- select-address -->
 <div class="demo-picker-container" v-show="myIsShow">
   <mu-divider></mu-divider>
    <mu-flexbox>
      <mu-flexbox-item>
        <mu-flat-button class="t3" label="取消" @click="cancel"/>
      </mu-flexbox-item>
      <mu-flexbox-item class="center f20">
        {{title}}
      </mu-flexbox-item>
      <mu-flexbox-item class="text-right">
         <mu-flat-button label="确定" primary @click="selectConfirm"/>
      </mu-flexbox-item>
    </mu-flexbox>
    <mu-picker :slots="addressSlots" :visible-item-count="5" @change="addressChange" :values="address"/>
</div>
</template>

<script>
export default {
  mounted () {
  },
  props: ['isShow', 'title', 'address'],
  data () {
    return {
      addressSlots: [
        {
          width: '100%',
          textAlign: 'center',
          values: Object.values(this.address)
        }
      ],
      address: this.values[],
      addressProvince: '北京'
    }
  },
  computed: {
    myIsShow () {
      return this.isShow
    }
  },
  methods: {
    addressChange (value, index) {
      switch (index) {
        case 0:
          this.addressProvince = value
          break
      }
      this.address = [this.addressProvince]
    },
    selectConfirm () {
      this.$emit('addresschange', this.addressProvince)
    },
    cancel () {
      this.$emit('cancel')
    }
  }
}
</script>
<style>
.demo-picker-container{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, .5);
  transition: all .4s;
}
</style>

